<template>
  <div class="">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      title="招聘详情"
      fixed
      @click-right="clickRight(detailObjs,$route.query.type)"
    >
      <div slot="right" v-if="$route.query.type == 1">
         <img class="img" src="../../assets/images/detail/zhuanhua.png" />
        <span class="share">转化</span>
      </div>
      <div slot="right" v-else-if="$route.query.type == 2">
        <img class="img" src="../../assets/detail_share.png" />
        <span class="share">分享</span>
      </div>
      <div slot="right" v-else>
        <van-icon name="ellipsis" />
      </div>
    </van-nav-bar>
  
    <div class="contents">
        <div class="content">
          <h3 style="text-align:center;margin-top:20px">{{ detailObjs.title }}</h3>
          <span v-html="detailObjs.content"></span>
             <!-- 公众号 -->
          <div class="public" v-if="detailObjs.attention">
            <img :src="$store.state.userInfo.officialChatImage" alt="" />
          </div>
           <div class="foot">
            <span @click="like = !like">
              <i
                class="iconfont"
                :class="{ 'icon-dianzan1': like, 'icon-dianzan': !like }"
                :style="{ color: like ? 'red' : '' }"
              ></i>
              点赞
            </span>
            <span @click="collect = !collect">
              <i
                class="iconfont"
                :class="{ 'icon-shoucang1': collect, 'icon-shoucang': !collect }"
                :style="{ color: collect ? 'red' : '' }"
              ></i>
              收藏
            </span>
            <span>
              <i class="iconfont icon-liulan"></i>
              浏览 {{ detailObjs.score }}
            </span>
          </div>
        </div>
       
          <div class="btn" v-if="detailObjs.notType==false" @click="addZhaoPinziliao">
              <span>投递简历</span>
          </div>
          <div class="btns" v-else>
              <span>已投递</span>
          </div>
    </div>
    <div class="overlay" v-show="show"></div>
    <div class="dialog" v-show="show">
      <img
        src="../../assets/images/detail/detail_img.png"
        alt=""
        class="dialog_img"
      />
      <h3>完善个人信息</h3>
      <p>完善信息后，可以将完善的信息在 分享文章中显示。</p>
      <div class="foot">
        <button @click="perfectClick(1)">去完善</button>
        <button @click="perfectClick(2)">直接分享</button>
      </div>
      <div class="close" @click="show = false">
        <img src="../../assets/images/detail/detail_close.png" alt="" />
      </div>
    </div>
    <!-- 更多弹框 -->
    <van-action-sheet v-model="inviteShow" :actions="inviteArr" cancel-text="取消" close-on-click-action @select="select($event)" @cancel="inviteShow=false" />
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      id: "",
      detailObjs: {},
      text: "",
      agentId: "",
      show: false,
      path: "", //过来的页面
      inviteShow:false,
      statusObj:{},
      like: false, //点赞
      collect: false, //收藏
      isPower:3,
    };
  },
  async mounted() {
    this.isCustomer();
    this.path = "/" + this.$route.query.from;
    this.agentId = sessionStorage.getItem("agentId");
    this.getInviteInfo();
  },
  computed: {
      inviteArr() {
          let arr=[
              { name: this.statusObj.status==1 ? "上架招聘" :"下架招聘", id: 2 },
              { name: "修改招聘", id: 3 },
              { name: "删除招聘", id: 4 },
              { name: "立即分享", id: 5 },
          ]
          if (this.statusObj.type == 8) {
              arr.unshift({ name: "推广设置", id: 1 });
          }
          return arr
      },
  },
  methods: {
    //判断是否有权限转化
    async isCustomer() {
      let userWxData = JSON.parse(sessionStorage.getItem("userWxData"));
      let account = sessionStorage.getItem("agentId");
      let res = await this.$api.isCustomer({
        openId: userWxData.openid,
        account,
        id: this.$store.state.userInfo.id,
        phone: this.$store.state.userInfo.phone,
      });
      this.isPower = res.data;
    },
  //选择状态
    select (e) {
        if(e.id==1){
           if(this.isPower==3){
             this.$toast("您的权限不足")
             this.$router.push("/mineInstructions")
           }else{
             this.$router.push({path:"/addRecruitment",query:{id:this.statusObj.id,title:"推广"}})
           }
        }else if(e.id==3){
            if(this.isPower==3){
              this.$toast("您的权限不足")
              this.$router.push("/mineInstructions")
            }else{
              this.$router.push({path:"/addRecruitment",query:{id:this.statusObj.id,title:"修改"}})
            }
        }else if(e.id==2){
            if(this.isPower==3){
              this.$toast("您的权限不足")
              this.$router.push("/mineInstructions")
            }else{
              this.updateStatus(this.statusObj.status,this.statusObj.id)
            }
        }else if(e.id==4){
            if(this.isPower==3){
              this.$toast("您的权限不足")
              this.$router.push("/mineInstructions")
            }else{
              this.delInvite()
            }
        }else if(e.id==5){
            this.share()
        }
        this.inviteShow = false
    },
    // 删除招聘
    delInvite(){
      Dialog.confirm({
        title: '删除提示',
        message: '确认删除此条招聘信息吗？',
      }).then(() => {
            let obj={
                id:this.statusObj.id,
                tableType:15,
                userId:sessionStorage.getItem("agentId")
            }
            this.$api.deleteArticlesEtc(obj).then(res=>{
                if(res.code==0){
                    this.$toast("删除成功")
                    this.$router.push({path:"/releasepromotion",query:{msg:2}})
                }else{
                    this.$toast("删除失败")
                }
            })
        })
        .catch(() => {
            return;
        });
    },
    // 上架和下架
    async updateStatus(status,id){
          let obj = {};
          if (status == 1) {
              obj.status = 2;
              obj.type=2
              obj.tableType=15
              obj.userId=sessionStorage.getItem("agentIds")
              obj.id=id
          } else {
              obj.status = 1;
              obj.type=2
              obj.tableType=15
              obj.userId=sessionStorage.getItem("agentIds")
              obj.id=id
          }
          let res=await this.$api.updateStatus(obj);
          if(res.code==0){
              this.$toast("成功")
              this.$router.go(-2);
          }else{
              this.$toast("失败")
          }
      },
    addZhaoPinziliao(){
      this.$router.push({
        path:"/resume",
        query:{
          id:this.$route.query.id,
        }
      })
    },
    //完善分享
    perfectClick(n) {
      let ids = sessionStorage.getItem("shareId");
      this.show = false;
      if (n == 1) {
        this.$router.push("/personal?id=" + this.$route.query.id);
      } else {
        this.$router.push({
          path: `/recruitmentedit?id=${this.$route.query.id}&userId=${ids}&tableId=${this.$route.query.id}`,
        });
      }
    },
    async share(){
       //判断是否有分享次数
      let obj = {
        id: this.$route.query.id,
        tableType: 15,
        type: 9,
      };
      let result = await this.$api.checkingSpreadShare(obj);
      if (!result.status) {
        return this.$toast("您不能分享该文章！");
      }
      // id=748&userId=19&tableId=748
      let ids = sessionStorage.getItem("shareId");
      let res = await this.$api.checkUserInfo(ids);
      if (res.code != 0) {
        this.show = true;
        return;
      }
      this.$router.push({
        path: `/recruitmentedit?id=${this.$route.query.id}&userId=${ids}&tableId=${this.$route.query.id}`,
      });
    },
    //点击右侧按钮
    clickRight(item,type) {
      if(type==1){
         if(this.isPower==3){
          this.$toast("你的权限不足，不能转化")
          this.$router.push("/mineInstructions")
         }else{
            this.$router.push(`/addRecruitment?id=${this.$route.query.id}&title=创建`);
         }
      }else if(type==2){
        this.share();
      }else{
        this.inviteShow=true
        this.statusObj=item
      }
    },
    async getInviteInfo() {
      let userInfo = JSON.parse(sessionStorage.getItem("userWxData"));
      let {
        openid,
        nickname: name,
        headimgurl: image,
        sex,
        city,
        province,
      } = userInfo;
      let obj = {
        tableId: this.$route.query.id,
        openId: openid,
        name,
        image,
        userId: this.agentId,
        tableType: 15,
        sex,
        city,
        province,
        customerId:sessionStorage.getItem("agentIds")
      };
      let res = await this.$api.getArticleInfo(obj);
      if (res.code != 0) return;
      this.detailObjs = res.data;
      sessionStorage.setItem("shareId", res.data.userId);
      sessionStorage.setItem("description", res.data.describes);
      sessionStorage.setItem("title", res.data.title);
      sessionStorage.setItem("article_img", res.data.cover);
      sessionStorage.setItem("changeTitle", res.data.changeTitle);
      sessionStorage.setItem("agentIds", res.data.userId);
      sessionStorage.setItem("title", res.data.title);
      sessionStorage.setItem("article_img", res.data.cover);
    },
  },
};
</script>

<style lang="less" scoped>
.contents{
  height: calc(100vh - 60px);
  margin-bottom: 50px;
  overflow-y: scroll;
  .btn{
    width: 80%;
    height: 42px;
    opacity: 1;
    background: #477fe6;
    border-radius: 41px;
    color:#fff;
    text-align: center;
    line-height: 42px;
    margin: -20px auto;
  }
  .btns{
    width: 80%;
    height: 42px;
    opacity: 1;
    background: #edf1f4;
    border-radius: 41px;
    color:#fff;
    text-align: center;
    line-height: 42px;
    margin: -20px auto;
  }
  .content {
    padding: 30px 15px;
    .public {
      margin-top: 35px;
      position: relative;
      background: url('../../assets/images/detail/zzh_bg.png') no-repeat;
      background-size: 100%;
      width: 100%;
      height: 138px;
      img {
        position: absolute;
        width: 70px;
        height: 70px;
        left: 210px;
        top: 20px;
      }
    }
    .foot {
        display: flex;
        align-items: center;
        font-size: 11px;
        color: #6c7592;
        justify-content: space-between;
        margin-top: 10px;
        span {
          &:nth-of-type(2) {
            margin-right: 155px;
          }
        }
    }
    h3 { 
      color: #141414;
      font-size: 20px; 
      font-weight: 700;
      margin-bottom: 10px;
    }
    img {
      height: 171px;
      width: 100%;
      margin: 15px 0 22px 0;
    }
    span {
      display: block;
      font-size: 12px;
      color: #333333;
      line-height: 24px;
      margin-bottom: 14px;
    }
    .user {
      background-color: #edf1f4;
      display: flex;
      padding: 14px 39px;
      box-sizing: border-box;
      height: 94px;
      img {
        width: 65px;
        height: 65px;
        margin: 0;
      }
      .right {
        margin-left: 9px;
        margin-top: 8.5px;
        span {
          display: block;
          font-size: 13px;
          color: #212121;
          line-height: normal;
        }
      }
    }
  }
}


.img {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
.share {
  font-size: 14px;
  color: #707070;
}
.dialog {
  position: fixed;
  z-index: 2002;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  width: 268px;
  height: 271px;
  background: url("../../assets/images/detail/detail_bg.png") no-repeat;
  background-size: 100% 100%;
  .dialog_img {
    width: 124px;
    height: 127px;
    position: absolute;
    left: 71.5px;
    top: -47px;
    z-index: 2003;
  }
  h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    margin-top: 120px;
    margin-bottom: 10px;
    text-align: center;
  }
  p {
    font-size: 14px;
    color: #666666;
    padding: 0 29px;
  }
  .foot {
    margin-top: 34px;
    padding: 0 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      width: 80px;
      height: 32px;
      background: linear-gradient(90deg, #fcaf36 1%, #fe774c);
      border-radius: 16px;
      color: #fff;
      border: none;
      &:last-of-type {
        border: 1px solid #fd7c49;
        color: #fd7c4a;
        background: #fff;
      }
    }
  }
  .close {
    width: 35px;
    height: 35px;
    position: absolute;
    bottom: -50px;
    left: 116px;
    z-index: 2004;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(90, 90, 90, 0.5);
}
</style>
